<form id="appliedForm" name="appliedForm"
      METHOD="POST" ACTION="<?= $_SERVER['PHP_SELF']; ?>"  
      onsubmit="return UTSDK.VALIDATION.validate('appliedForm')">
    <input type="hidden" name="formSource" value="cApplied"/>
    <input type="hidden" name="action" value="update"/>
    <table>
        <tr>
            <td><label>User Account: </label></td>
            <td>
                <select id="appliedAccount" name="person" data-default="null"
                        data-validation="select" data-validationmessage="User account must be chosen"
                        data-required="false">
                    <option value="null">Create New</option>
                </select>
            </td>
            <td><label id="appliedAccountError"></label></td>
        </tr>
        <tr>
            <td><label>Role: </label></td>
            <td>
                <select id="appliedRole" name="appliedRole"
                        data-validation="select" data-validationmessage="Role must be chosen"
                        data-required="true" data-default="null">
                    <option value="null">Pick Role</option>
                </select>
            </td>
            <td><label id="appliedRoleError"></label></td>
        </tr>
        <tr>
            <td><label>Attended: </label></td>
            <td>
                <select id="attended" name="attended" data-default="false">
                    <option value="true">Yes</option>
                    <option value="false" selected="selected">No</option>
                </select>
            </td>
            <td><label id="attendedError"></label></td>
        </tr>
        <tr>
            <td><label>Hours Worked: </label></td>
            <td><input id="aHours" type="text"  data-validation="decimal" data-dp="2" 
                       name="hours" placeholder="Hours Works" data-validationmessage="Must be 2 decimal places"/></td>
            <td><label id="aHoursError"></label></td>
        </tr>
        <tr>
            <td><label>Application Status: </label></td>
            <td>
                <input type="text" id="status" name="accepted" data-default="pending" 
                       data-required="false" class="inputLabel" readonly="readonly" placeholder="Application Status"/>
            <td><label id="statusError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Update Application" id="appliedSubmit"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="button" onclick="updateAction(event)" 
                       value="Withdraw Application" id="appliedWithdraw"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><label id="widthdrawLabel" class="hidden"></label></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="button"
                       value="Generate Role Report" id="generateReport"/></td>
            <td></td>
        </tr>
    </table>
</form>
<script>
    //This module sets up and populates the applicants form
    var appliedForm = (function() {
        var form = UTSDK.$("appliedForm");
        var roles = UTSDK.$("appliedRole");
        var withdrawBtn = UTSDK.$("appliedWithdraw");
        var withdrawLbl = UTSDK.$("widthdrawLabel");
        var report = UTSDK.$("generateReport");
        var saveBtn = UTSDK.$("appliedSubmit");

        window.addEventListener("load", function() {
            roles.addEventListener("change", function() {
                var json = {};
                json["appliedRole"] = roles.value;
                json["appliedPerson"] = form.elements[2].value;
                json["id"] = form.id;
                UTSDK.updateForm(json, "update.php", function(data) {
                    UTSDK.AJAX.get("update.php", data, function(responce) {
                        responce = JSON.parse(responce);

                        if (responce["accepted"] === "accepted") {
                            UTSDK.addClass(withdrawBtn, "hidden");
                            UTSDK.removeClass(withdrawLbl, "hidden");
                            withdrawLbl.innerHTML = "Contact UTS Event Management to withdraw application";
                            UTSDK.enable(UTSDK.$("aHours"));
                            UTSDK.enable(UTSDK.$("attended"));
                            UTSDK.enable(saveBtn);
                            UTSDK.removeClass(withdrawBtn, "disabled");
                        }
                        else if (responce["accepted"] === "rejected") {
                            UTSDK.disable(UTSDK.$("aHours"));
                            UTSDK.disable(UTSDK.$("attended"));
                            UTSDK.disable(saveBtn);
                            UTSDK.addClass(withdrawBtn, "disabled");
                            UTSDK.addClass(withdrawBtn, "hidden");
                            UTSDK.removeClass(withdrawLbl, "hidden");
                            withdrawLbl.innerHTML = "Cannot withdraw rejected applicaiton";
                        }
                        else {
                            UTSDK.enable(UTSDK.$("aHours"));
                            UTSDK.enable(UTSDK.$("attended"));
                            UTSDK.enable(saveBtn);
                            UTSDK.removeClass(withdrawBtn, "disabled");
                            UTSDK.removeClass(withdrawBtn, "hidden");
                            UTSDK.addClass(withdrawLbl, "hidden");
                        }
                    }, true);
                });
            });
        });
        function updateAction(evt) {
            form.elements[1].value = "withdraw";
            form.submit();
        }
        
        report.addEventListener("click", function() {
            UTSDK.redirect("volunteerreport.php?volunteer=" + UTSDK.$("appliedAccount").value);
        });

        function updateRoles() {
            var json = {};
            json[form.elements[0].name] = form.elements[0].value;
            json["person"] = form.elements[2].value;
            json["id"] = form.id;
            UTSDK.updateSelect(json, roles, "update.php");
        }

        return {
            updateRoles: updateRoles
        };
    })();
</script>
